<template>
  <div id="contentCountAnalysis" />
</template>
<script>
export default {
  name: 'ContentCountAnalysis',
  props: {
    echartsData: { type: Object, default: () => {} }
  },
  data() {
    return { orderChart: null };
  },
  watch: {
    echartsData: {
      handler(newVal, oldVal) {
        this.setEchartsData();
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        this.orderChart.resize();
      };
    });
  },
  methods: {
    setEchartsData() {
      const echarts = require('echarts');
      this.orderChart = this.$echarts.init(document.getElementById('contentCountAnalysis'));
      this.orderChart.setOption({
        title: { text: '元', textStyle: { fontSize: this.$f * 12, fontWeight: 400, color: '#858D9D' } },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'line', label: { backgroundColor: '#1EB398' }, lineStyle: { color: '#1EB398', width: this.$f * 2, type: 'dashed' } }
        },
        grid: { top: '15%', left: '2%', right: '2%', bottom: '3%', containLabel: true },
        xAxis: [{ type: 'category', boundaryGap: false, data: this.echartsData.xData, axisLabel: { fontSize: this.$f * 12 } }],
        yAxis: [{ type: 'value', axisLabel: { fontSize: this.$f * 12 } }],
        series: [
          {
            name: '销售额',
            type: 'line',
            smooth: true,
            showSymbol: false,
            emphasis: { focus: 'series' },
            itemStyle: {
              normal: {
                color: '#1EB398',
                lineStyle: { color: '#1EB398' },
                areaStyle: {
                  opacity: 0.1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#1EB398' },
                    { offset: 0, color: '#1EB398' }
                  ])
                }
              }
            },
            data: this.echartsData.sData
          }
        ]
      });
    }
  }
};
</script>
